<template>
    <!-- tabbar -->
	<!-- 电脑端导航栏 -->
	<div class="mtabbar">
		<div class="tabbar">
			<el-row>
				<el-col :lg="{span:4,offset:1}" class="icon" :style="{height:iconHeight+'px'}">

				</el-col>
				<el-col :lg="{span:18,offset:5}" class="tabbar-content">
					<ul>
						<li><a @click="turnToHome"><i class="iconfont icon-home"></i> 首页</a></li>
						<li><a @click="turnToMessage"><i class="iconfont icon-liuyan"></i>留言板</a></li>
						<li><a @click="turnToForum"><i class="iconfont icon-liaotian"></i>分享空间</a></li>
						<li><a @click="turnToPersonal"><i class="iconfont icon-my"></i>个人中心</a></li>
						<li style="float: right;width: 110px"><a @click="turnToLogin"><i class="iconfont icon-tuichu"></i> 退出账号</a></li>
					</ul>
				</el-col>
			</el-row>
		</div>
	
		<!-- 手机端导航栏 -->
		<div class="sm-tabbar">
				
				<!-- 导航栏 -->
					<el-menu
							  mode="horizontal"
							  background-color="#545c64"
							  text-color="#fff"
							  active-text-color="#ffd04b"
							  >
					  <el-submenu index="1">
						<template slot="title">菜单</template>
						<el-menu-item index="1-1" @click="turnToHome">首页</el-menu-item>
						<el-menu-item index="1-2" @click="turnToMessage">留言板</el-menu-item>
						<el-menu-item index="1-3" @click="turnToForum">分享空间</el-menu-item>
						<el-menu-item index="1-4" @click="turnToPersonal">个人中心</el-menu-item>
						<el-menu-item index="1-5" @click="turnToLogin">退出账号</el-menu-item>
					  </el-submenu>
					</el-menu>
				
		</div>
	</div>
	
</template>

<script>

    export default {
        name: "tab-bar",
		data(){
			return{
				iconHeight:70,
				direction:0
			}
		},
		mounted() {
		    this.timer = setInterval(this.updateIconHeight, 100);
		},
        methods:{
            turnToContent(){
                this.$router.push('/content').catch(error=>error)
            },
            turnToHome(){
                this.$router.push('/home').catch(error=>error)
            },
            turnToCollection(){
                this.$router.push('/collection').catch(error=>error)
            },
            turnToMessage(){
                this.$router.push('/message').catch(error=>error)
            },
            turnToForum(){
                this.$router.push('/forum').catch(error=>error)
            },
            turnToPersonal(){
                this.$router.push('/personalInfo').catch(error=>error)
            },
            turnToLogin(){
                window.localStorage.clear();//清除
                this.$router.replace('/login').catch(error=>error)
            },
			updateIconHeight(){
				
				if(this.direction == 0){
					//说明需要向上移动
					this.iconHeight--;
					if(this.iconHeight == 60)
						this.direction = 1;
				}else{
					//说明需要向下移动
					this.iconHeight++;
					if(this.iconHeight == 70)
						this.direction = 0;
				}
			}
        }
    }
</script>

<style scoped>
	
/*手机端*/
@media only screen and (max-width: 767px){
	.tabbar{
		display: none;
	}
	.sm-tabbar{
		height: 54px;
		background-color: rgba(10,10,0,0.7);
		
	}
}

/*电脑端*/
@media only screen and (min-width: 1080px){
	
	.sm-tabbar{
		display: none;
	}
	
	.tabbar{
	    height: 54px;
	    background-color: rgba(10,10,0,0.7);
	}
	.tabbar-content>ul{
	    height: 54px;
	    align-content: center;
	}
	.tabbar-content>ul li{
	    line-height: 54px;
	    display: block;
	    font-size: 14px;
	    color: white;
	    float: left;
	    width: 105px;
	    text-align: center;
	}
	.icon{
	    /* height: 54px; */
	    background: url("../../assets/image/logo.png") no-repeat center;
	    background-size: cover;
		position: absolute;
	}
	.tabbar-content>ul li a{
	    display: block;
	    padding: 0px 15px;
	    cursor: pointer;
	}
}
	


</style>